<template>
    <div class="father">
        <h3>父组件</h3>
        <h4>获取子组件通过自定义事件传递的数据：{{ getData }}</h4>
        <!-- 给组件绑定一个事件并在子组件中声明toyData事件 -->
        <Child @toyData="sonData"/>
    </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import {ref} from 'vue'
let getData = ref('')
// 获取子组件传递的数据
function sonData(data:string) {
    console.log(data,"<= 获取组件传递的数据")
    getData.value = data
}
</script>

<style scoped>
    .father{
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
    button{
        margin: 10px;
    }
</style>